<template>
  <el-container>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :data="tableData"
        :tree-config="{expandAll: false}"
        :export-config="{filename:'行政区域',sheetName:'行政区域'}"
      >
        <!-- 快速查询 -->
        <template v-slot:toolbar_search>
          <rayd-quick-query v-model="filterName" @query="query"></rayd-quick-query>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons></template>
      </vxe-grid>
    </el-main>
  </el-container>
</template>

<script>
import { Ssq } from "@/api";
export default {
  data() {
    return {
      /* vxe-grid */
      filterName: "", //查询实体
      tableData: [], //表格实体
      tableToolbar: {
        export: true,
        refresh: { 
          query : ()=> {
            this.filterName = ''; //清空条件
            this.query();
          }
        },
        zoom: true,
        custom: true
      },
      tableColumn: [
        {
          type: "html",
          field: "data",
          title: "行政区域",
          sortable: true,
          treeNode: true,
          align: "left"
        },
        { type: "html", field: "id", title: "邮政编码", sortable: true }
      ]
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.$store.commit("SET_ISLOADING",true);
      //初始化数据
      this.query();
    },
    //列表数据
    query() {
      this.$store.commit("SET_ISLOADING",true);
      return Ssq.GetTreeList({queryjson:JSON.stringify({QueryInfo:this.filterName})}).then(res => {
        this.tableData = res;
        this.$store.commit("SET_ISLOADING",false);
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>